<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- <link rel="stylesheet" href="../fonts/css/font-awesome.min.css" /> -->
		<link
			href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
			rel="stylesheet"
		/>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: #eee;
			}
			.container {
				/* 这里的弹性布局 让元素能够水平排列 并且能够让A这个行内元素设置宽度和高度 */
				display: flex;
			}
			.container .btn {
				overflow: hidden;
				position: relative;
				width: 90px;
				height: 90px;
				text-align: center;
				margin: 0 10px;
				border-radius: 25px;
				background-color: #fff;
				box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.1);
			}
			.container .fa {
				font-size: 38px;
				/* 缩放 0.8倍 */
				transform: scale(0.8);
				line-height: 90px;
				/* 贝塞尔曲线 让运动有无限可能 */
				transition: all 0.4s cubic-bezier(0.31, -0.1, 0.43, 1.59);
			}
			.container .btn::before {
				content: "";
				position: absolute;
				top: 90%;
				left: -110%;
				width: 120%;
				height: 120%;
				/* 顺时针旋转45度 */
				transform: rotate(45deg);
				/* background-color: #000; */
				transition: all 0.4s cubic-bezier(0.31, -0.1, 0.43, 1.59);
			}
			.container .btn .fa-facebook {
				color: #3b5988;
			}
			.container .btn_facebook::before {
				background-color: #3b5988;
			}
			.container .btn .fa-twitter {
				color: #00aff0;
			}
			.container .btn_twitter::before {
				background-color: #00aff0;
			}
			.container .btn .fa-google {
				color: #dc4a38;
			}
			.container .btn_google::before {
				background-color: #dc4a38;
			}
			.container .btn .fa-instagram {
				color: #bf00ff;
			}
			.container .btn_instagram::before {
				background-color: #bf00ff;
			}
			.container .btn .fa-pinterest {
				color: #c00;
			}
			.container .btn_pinterest::before {
				background-color: #c00;
			}
			.container .btn:hover::before {
				top: -10%;
				left: -10%;
			}
			.container .btn:hover .fa {
				color: #fff;
				transform: scale(1);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<a href="javascript:void(0)" class="btn btn_facebook">
				<i class="fa fa-facebook"></i>
			</a>
			<a href="javascript:void(0)" class="btn btn_twitter">
				<i class="fa fa-twitter"></i>
			</a>
			<a href="javascript:void(0)" class="btn btn_google">
				<i class="fa fa-google"></i>
			</a>
			<a href="javascript:void(0)" class="btn btn_instagram">
				<i class="fa fa-instagram"></i>
			</a>
			<a href="javascript:void(0)" class="btn btn_pinterest">
				<i class="fa fa-pinterest"></i>
			</a>
		</div>
	</body>
</html>
